<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->
		<!--数据图-->
		<script src="../../libs/thirdparty/highcharts/js/highcharts.js"></script>
		<!--环形图-->
		<script src="../../libs/js/graphical/raphael.js" type="text/javascript"></script>
		<script src="js/chart_ring.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="../../libs/thirdparty/highcharts/js/highcharts-more.js"></script>
		
		<!--基本选项卡start-->
		<script type="text/javascript" src="../../libs/js/nav/basicTab.js"></script>
		<!--基本选项卡end-->
		
		
		<link rel="stylesheet" type="text/css" href="style/style.css" />
		<script src="js/demo.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				background: #F2F3F7;
			}
			.tab_content{
				padding: 0 0;
			}
			.mainCon{
				float: right;
				margin: 5px 10px 0 0;
			}
			.selectbox{
				width: 110px!important;
			}
		</style>
	</head>

	<body>
		<div class="page_content">
			
			
			<div class="tab_content" style="display: block;">
				<div class="top">
					<div class="tab_time">
						<ul>
							<li class="active">最近7天</li>
							<li>今天</li>
							<li>最近三月</li>
							<li>其他时间</li>
							<div class="clear"></div>
						</ul>
					</div>
					<!--订单-->
					<div class="indent">
						<ul>
							<li>
								<div class="left">
									<img src="style/indent01.png" alt="" />
								</div>
								<div class="right">
									<p class="right_title">NO order from</p>
									<p><span>1,562</span>已上传订单</p>
								</div>
								<div class="clear"></div>
							</li>
							<li>
								<div class="left" style="background:#94D9FA">
									<img src="style/indent02.png" alt="" />
								</div>
								<div class="right">
									<p class="right_title">NO play to deal with</p>
									<p><span>314</span>未处理要货计划</p>
								</div>
								<div class="clear"></div>
							</li>
							<li>
								<div class="left" style="background:#4586BE">
									<img src="style/indent03.png" alt="" />
								</div>
								<div class="right">
									<p class="right_title">NO order from</p>
									<p><span>1,562</span>已上传订单</p>
								</div>
								<div class="clear"></div>
							</li>
							<li>
								<div class="left" style="background:#CFE159">
									<img src="style/indent04.png" alt="" />
								</div>
								<div class="right">
									<p class="right_title">NO play to deal with</p>
									<p><span>314</span>未处理要货计划</p>
								</div>
								<div class="clear"></div>
							</li>
							<li>
								<div class="left" style="background:#6FBB63">
									<img src="style/indent05.png" alt="" />
								</div>
								<div class="right">
									<p class="right_title">NO order from</p>
									<p><span>1,562</span>已上传订单</p>
								</div>
								<div class="clear"></div>
							</li>
							<li>
								<div class="left" style="background:#FAB454">
									<img src="style/indent06.png" alt="" />
								</div>
								<div class="right">
									<p class="right_title">NO play to deal with</p>
									<p><span>314</span>未处理要货计划</p>
								</div>
								<div class="clear"></div>
							</li>
							<div class="clear"></div>
						</ul>
						<div class="indent_title">
							<span>经营分析</span>
						</div>
						<div class="top">
							<div class="analyze1">
								<div class="analyze1_title">
									<span>促销政策分析</span>
									<select>
										<option value="">筛选条件</option>
										<option value="0">新增图片</option>
										<option value="1">维护图片</option>
										<option value="2">新增新闻</option>
									</select>
								</div>
								<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
							</div>
							<div class="analyze1" style="">
								<div class="analyze1_title">
									<span>终端投放费用分析</span>
									<select>
										<option value="">筛选条件</option>
										<option value="0">新增图片</option>
										<option value="1">维护图片</option>
										<option value="2">新增新闻</option>
									</select>
								</div>
								<div id="container1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
							</div>
							
							<div class="analyze1" style="margin-right: 0;">
								<div class="analyze1_title">
									<span>占比图</span>
									<select>
										<option value="">筛选条件</option>
										<option value="0">新增图片</option>
										<option value="1">维护图片</option>
										<option value="2">新增新闻</option>
									</select>
								</div>
								<div id="container5" style="width: 98%; height: 350px; margin: 0 auto"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="indent_title">
							<span>经营分析</span>
						</div>
						<div class="analyze1" style="width: 100%;margin: 0;margin-top: 20px;">
							<div class="analyze1_title">
								<span>促销政策分析</span>
								<select>
									<option value="">筛选条件</option>
									<option value="0">新增图片</option>
									<option value="1">维护图片</option>
									<option value="2">新增新闻</option>
								</select>
							</div>
							<div id="container2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
						</div>
						<div class="analyze1" style="width: 58%;">
							<div class="analyze1_title">
								<span>终端投放费用分析</span>
								<select>
									<option value="">终端名称</option>
									<option value="0">新增图片</option>
									<option value="1">维护图片</option>
									<option value="2">新增新闻</option>
								</select>
								<select>
									<option value="">终端名称</option>
									<option value="0">新增图片</option>
									<option value="1">维护图片</option>
									<option value="2">新增新闻</option>
								</select>
							</div>
							<div id="container3" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
						</div>
						
						<div class="analyze1" style="width: 400px;margin: 0;margin-top: 20px;">
							<div class="analyze1_title">
								<span>饼  图</span>
								<div id="container4" style="min-width: 310px; height: 280px; margin: 0 auto"></div>
							</div>
							
						</div>
					</div>
					<div class="clear"></div>
					
					
				</div>
			</div>
			
			
		</div>
		<script>
			$('#container').highcharts({
	            chart: {
	                zoomType: 'xy'
	            },
	            title: {
	                text: ''
	            },
	            subtitle: {
					text: document.ontouchstart === undefined ?
	                    '' :
	                    ''
	            },
	            xAxis: [{
	                categories: ['0', '2', '4','6','8','10','12','14','16','18','20','22','24']
	            }],
	            yAxis: [{ // Primary yAxis
	                labels: {
	                    format: '{value}',
	                    style: {
	                        color: '#B7B7B7'
	                    }
	                },
	                title: {
	                    text: ' ',
	                    style: {
	                        color: '#B7B7B7'
	                    }
	                }
	            }],
	            tooltip: {
	                shared: true
	            },
	            legend: {
	                layout: 'vertical',
	                align: 'left',
	                x: 120,
	                verticalAlign: 'bottom',
	                y: 100,
	                floating: true,
	                backgroundColor: '#FFFFFF'
	            },
	            series: [{
	                name: '销售',
	                type: 'line',
	                data: [250, 250, 500, 500, 500, 500, 500, 500, 500, 750, 1000, 1250,1500],
	                tooltip: {
	                    valueSuffix: ''
	                },
	                color:"#3399ff"
	            }]
	        });
	        
	        
			$('#container1').highcharts({
	            chart: {
	                type: 'column',
	                margin: [ 50, 20, 50, 50]
	            },
	            title: {
	                text: '利润金额'
	            },
	            xAxis: {
	                categories: [
	                    '北京',
	                    '上海',
	                    '广州',
	                    '深圳'
	                ],
	                labels: {
	                    rotation: 0,
	                    align: 'center',
	                    style: {
	                        fontSize: '13px',
	                        fontFamily: 'Verdana, sans-serif'
	                    }
	                }
	            },
	            yAxis: [{ labels: {
	                    format: '{value}',
	                    style: {
	                        color: '#B7B7B7'
	                    }
	                },
	               title: {
	                    text: ' ',
	                    style: {
	                        color: '#B7B7B7'
	                    }
	                }
	            }],
	            legend: {
	                enabled: false
	            },
	            tooltip: {
	                pointFormat: '投放费用: <b>{point.y:.1f} 百万</b>'
	            },
	            series: [{
	                name: 'Population',
	                data: [8000, 6000, 3000, 1000],
	                dataLabels: {
	                    enabled: true,
	                    rotation: 0,
	                    color: '#3399ff',
	                    align: 'center',
	                    x: 0,
	                    y: 0,
	                    style: {
	                        fontSize: '13px',
	                        textShadow: '0 0 0px black'
	                    }
	                }
	            }]
	        });
	        
		   
			$('#container2').highcharts({
	            chart: {
	                zoomType: 'xy'
	            },
	            title: {
	                text: ''
	            },
	            subtitle: {
					text: document.ontouchstart === undefined ?
	                    '' :
	                    ''
	            },
	            xAxis: [{
	                categories: ['0', '2', '4','6','8','10','12','14','16','18','20','22','24']
	            }],
	            yAxis: [{ // Primary yAxis
	                labels: {
	                    format: '{value}',
	                    style: {
	                        color: '#B7B7B7'
	                    }
	                },
	                title: {
	                    text: ' ',
	                    style: {
	                        color: '#B7B7B7'
	                    }
	                },
	                min: 0
	            }],
	            tooltip: {
	                shared: true
	            },
	            legend: {
	                layout: 'vertical',
	                align: 'left',
	                x: 120,
	                verticalAlign: 'bottom',
	                y: 100,
	                floating: true,
	                backgroundColor: '#FFFFFF'
	            },
	            series: [{
	                name: '金额',
	                type: 'line',
	                data: [0, 5000, 3000, 2000, 500, 5000, 7007, 7500, 5700, 7570, 1700, 2250,6500],
	                tooltip: {
	                    valueSuffix: ''
	                },
	                color:"#EA583F"
	            }]
	        });
	        $('#container3').highcharts({
	            chart: {
	                type: 'column',
	                margin: [ 50, 20, 50, 50]
	            },
	            title: {
	                text: ' '
	            },
	            xAxis: {
	                categories: [
	                    '销售金额',
	                    '销售成本',
	                    '赠品成本金额',
	                    '投放利润'
	                ],
	                labels: {
	                    rotation: 0,
	                    align: 'center',
	                    style: {
	                        fontSize: '13px',
	                        fontFamily: 'Verdana, sans-serif'
	                    }
	                },
	                align: 'center'
	            },
	            yAxis: [{ labels: {
	                    format: '{value}',
	                    style: {
	                        color: '#B7B7B7'
	                    }
	                },
	               title: {
	                    text: ' ',
	                    style: {
	                        color: '#B7B7B7'
	                    }
	                }
	            }],
	            legend: {
	                enabled: false
	            },
	            tooltip: {
	                pointFormat: '投放费用: <b>{point.y:.1f} 百万</b>'
	            },
	            series: [{
	                name: 'Population',
	                data: [8000, 6000, 3000, 1000],
	                color:['#E65A43'],
	                dataLabels: {
	                    enabled: true,
	                    rotation: 0,
	                    color:'#E65A43',
	                    align: 'center',
	                    x: 0,
	                    y: 0,
	                    style: {
	                        fontSize: '13px',
	                        textShadow: '0 0 0px black'
	                    }
	                }
	            }]
	        });
	        
			$('#container4').highcharts({
	            chart: {
	                plotBackgroundColor: null,
	                plotBorderWidth: null,
	                plotShadow: false
	            },
	            title: {
	                text: '客户分布情况'
	            },
	            tooltip: {
	              pointFormat: '{series.name} <b>{point.percentage:.1f}%</b>'
	            },
	            plotOptions: {
	                pie: {
	                    allowPointSelect: true,
	                    cursor: 'pointer',
	                    dataLabels: {
	                      enabled: false,
	                      color: '#000000',
	                      connectorColor: '#000000',
	                      format: '<b>{point.name}</b> {point.percentage:.1f} %'
	                  },
	                    showInLegend: false
	                }
	            },
	            series: [{
	                type: 'pie',
	                name: '份额：',
	                data: [
	                    ['北京',   45.0],
	                    ['上海',       26.8],
	                    {
	                        name: '深圳',
	                        y: 12.8,
	                        sliced: true,
	                        selected: true
	                    },
	                    ['广州',    8.5],
	                    ['重庆',     6.2],
	                    ['其他',   0.7]
	                ]
	            }]
	        });
			
			
			
			$('#container5').highcharts({
	        chart: {
	            plotBackgroundColor: null,
	            plotBorderWidth: null,
	            plotShadow: false
	        },
	        title: {
	            floating:true,
	            text: '圆心显示的标题'
	        },
	        tooltip: {
	            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	        },
	        plotOptions: {
	            pie: {
	                allowPointSelect: true,
	                cursor: 'pointer',
	                dataLabels: {
	                    enabled: false,
	                    softConnector: false,
	                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
	                    padding: 0,
                  		distance: 50
	                },
	                point: {
	                    events: {
	                        mouseOver: function(e) {  // 鼠标滑过时动态更新标题
	                            // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
	                            chart.setTitle({
	                                text: e.target.name+ '\t'+ e.target.y + ' %'
	                            });
	                        }
	                    }
	                },
	                size:120,
	                showInLegend: true
	            }
	        },
	        series: [{
	            type: 'pie',
	            innerSize: '80%',
	            name: '市场份额',
	            data: [
	                ['PC',60],
                    ['APP', 20],
                    ['微信', 10],
                    ['H5',10]
	            ]
	        }],
	        colors:['#E65A43','#6FBB63','#FAB454','#4586BE']
	    }, function(c) {
	        // 环形图圆心
	        var centerY = c.series[0].center[1],
	            titleHeight = parseInt(c.title.styles.fontSize);
	        c.setTitle({
	            y:centerY + titleHeight/2
	        });
	        chart = c;
	    });
		</script>
	</body>

</html>